<style lang="less">
@import '../../../styles/common.less';
</style>

<template>
    <Card style="height:800px">
        <Card>
            <header>
                <Row>
                <span>申请日期(起):</span>
                <DatePicker type="date" style="width: 150px" v-model="queryCondition.applyBeginDate" name="payBeginDate" value="yyyy-MM-dd"></DatePicker>
                <span style="width: 200px;margin-left: 10px;">-</span>
                <span style="width: 200px;margin-left: 10px;">申请日期(止):</span>
                <DatePicker type="date" style="width: 150px" v-model="queryCondition.applyEndDate" name="payEndDate" value="yyyy-MM-dd"></DatePicker>
                <span style="width: 200px;margin-left: 20px;">身份证号:</span>
                <Input v-model="queryCondition.custIdNumber" style="width: 150px" />
                 <span style="width: 200px;margin-left: 20px;">姓名:</span>
                <Input v-model="queryCondition.custName" style="width: 150px" />
                 <span style="width: 200px;margin-left: 20px;">合同编号:</span>
                <Input v-model="queryCondition.contractId" style="width: 150px" />
                <span style="width: 200px;margin-left: 20px;">状态：</span>
                <Select v-model="queryCondition.adjustStatus" class="v-select-wrapper" style="width:150px">
                    <Option v-for="item in adjustStatusList" :value="item.value" :key="item.value">{{ item.lable}}</Option>
                </Select>
               </Row>
                <Row style="margin-top:15px">
                <span>还款计划编号:</span>
                <Input v-model="queryCondition.planId" style="width: 150px" />

                <Button type="primary" @click="listQuery"  style="margin-left: 20px;"   >搜索</Button>
                <Button type="primary" @click="reset"  style="margin-left: 20px;"   >重置</Button>
                 </Row>
            </header>
        </Card>
        <Card>
            <Row type="flex" justify="center" align="middle" class="list-query">
                <Table :columns="columnsDetail" :data="dataDetail" style="width: 100%;"></Table>
            </Row>

            <div style="margin-top: 36px;text-align: center;">
                <Page :total="queryCondition.total" :current="queryCondition.pageNum" :page-size="queryCondition.pageLength" size="small" show-elevator show-sizer show-total @on-change="pageChange" @on-page-size-change="sizeChange"></Page>
            </div>
        </Card>
    </Card>
</template>

<script>
import expandRow from './penalty-adjustment-query-tableExpand.vue'
export default {
  name: 'mutative-router',
  components: { expandRow },
  data () {
    return {
      queryCondition: {
        pageNum: 1,
        pageSize: 10,
        total: 0,
        custIdNumber: '',
        custName: '',
        contractId: '',
        planId: '',
        applyBeginDate: '',
        applyEndDate: '',
        adjustStatus: ''
      },
      columnsDetail: [
        {
          type: 'expand',
          width: 30,
          render: (h, params) => {
            return h(expandRow, {
              props: {
                row: params.row
              }
            })
          }
        },
        {
          type: 'index',
          title: '序号',
          width: 60,
          align: 'center'
        },
        {
          title: '申请编号',
          key: 'loanId',
          align: 'center',
          width: 160,
          className: 'tbake'
        },
        {
          title: '还款计划号',
          key: 'planId',
          align: 'center',
          width: 260,
          className: 'tbake'
        },
        {
          title: '申请日期',
          key: 'applyTime',
          align: 'center',
          width: 120,
          className: 'tbake',
          render: (h, params) => {
            var vm = this
            return h('div', [
              h('span', vm.$util.loanModularFormatTime(params.row.applyTime))
            ])
          }
        },
        {
          title: '客户姓名',
          key: 'custName',
          align: 'center',
          width: 100,
          className: 'tbake'
        },
        // {
        //   title: '客户身份证号',
        //   key: 'custCardNo',
        //   align: 'center',
        //   width: 80,
        //   className: 'tbake'
        // },
        // {
        //   title: '期数',
        //   key: 'periods',
        //   align: 'center',
        //   width: 80,
        //   className: 'tbake'
        // },
        {
          title: '管理费',
          key: 'managementFee',
          align: 'center',
          width: 100,
          className: 'tbake'
        },
        {
          title: '罚费1（违约金）',
          key: 'penaltyFee',
          align: 'center',
          width: 120,
          className: 'tbake'
        },
        {
          title: '罚费2（滞纳金）',
          key: 'lateFee',
          align: 'center',
          width: 120,
          className: 'tbake'
        },
        {
          title: '交易类型',
          key: 'transactionName',
          align: 'center',
          width: 120,
          className: 'tbake'
        },
        {
          title: '交易金额',
          key: 'amount',
          align: 'center',
          width: 120,
          className: 'tbake'
        },
        {
          title: '当前状态',
          key: 'status',
          align: 'center',
          width: 120,
          className: 'tbake',
          render: (h, params) => {
            if (params.row.status === '0') {
              return h('span', {
                props: {
                  type: 'span',
                  size: 'small'
                }
              }, '待审批')
            } else if (params.row.status === '1') {
              return h('span', {
                props: {
                  type: 'span',
                  size: 'small'
                }
              }, '审批成功')
            } else if (params.row.status === '2') {
              return h('span', {
                props: {
                  type: 'span',
                  size: 'small'
                }
              }, '审批拒绝')
            }
          }
        },
        {
          title: '申请人',
          key: 'applyUserName',
          align: 'center',
          width: 80,
          className: 'tbake'
        }
        // {
        //   title: '备注',
        //   key: 'remark',
        //   align: 'center',
        //   width: 80,
        //   className: 'tbake'
        // }
      ],
      dataDetail: [
      ],
      adjustStatusList: [
        {
          lable: '请选择',
          value: ''
        },
        {
          lable: '待审批',
          value: '0'
        },
        {
          lable: '审批成功',
          value: '1'
        },
        {
          lable: '审批拒绝',
          value: '2'
        }
      ]
    }
  },
  computed: {
    avatorImage () {
      return localStorage.avatorImgPath
    }
  },

  created () {
    // 初始化当前页面请求对象实例
    this.$ajax = this.$util.ajax()
  },
  methods: {
    listQuery () {
      var vm = this
      this.$ajax.post(this.$appContext.marvels_core_financial + 'financial/loan/penaltyAdjustment/service/penaltyAdjustmentQuery', vm.queryCondition).then(re => {
        var data = re.data
        vm.dataDetail = data.data.list
        vm.queryCondition.total = data.data.total
      }).catch(er => {

      })
    },
    reset () {
      var vm = this
      vm.queryCondition.custIdNumber = ''
      vm.queryCondition.custName = ''
      vm.queryCondition.contractId = ''
      vm.queryCondition.planId = ''
      vm.queryCondition.applyBeginDate = ''
      vm.queryCondition.applyEndDate = ''
      vm.queryCondition.adjustStatus = ''
    },
    pageChange: function (pageNum) {
      var vm = this
      vm.queryCondition.pageNum = pageNum
      vm.listQuery()
    },
    sizeChange: function (pageLength) {
      var vm = this
      vm.queryCondition.pageSize = pageLength
      vm.listQuery()
    }
  }
}
</script>

<style>
.tbake .ivu-table-cell{
  padding-left: 2px;
  padding-right: 2px;
}
.adjust-query-common-div {
  width: 150px;
  float: left;
  margin-left: 13px;
}
.adjust-query-left-div {
  width: 150px;
  float: left;
}
.adjust-query-i-icon {
  float: left;
  margin-left: 20px;
}
</style>
